<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import { WalletAxios } from "@/api";
import sortBy from "lodash";
import PubSub from "pubsub-js";
import { PubSubEnum } from "@/types";
import { Popup } from "vant";
import { onMounted } from "vue";
import { Arraylist, PaymentChannelListRes } from "@/types/wallet.ts";
import { UserStore } from "@/store";
import { Field } from "vant";
import { UserAxios } from "@/api/user";
import { FiltrationFun } from "@/utils";
const userStore = UserStore();
const { t } = useI18n();
const inputVal: any = ref("");
//显示充值的页面或者登记充值信息
const popupShow = ref(false);
//0是首充充值要输入用户信息，1是已经填完充值信息直接打开充值页面
const isInfoRecharge = ref(0);
//const selectKey = ref(-1);
const paylist: Arraylist = reactive({ rechargeAmounts: [] });
const cpf = ref(userStore.userInfoDetails.profile.cpf);
const userCpfName = ref(userStore.userInfoDetails.profile.cpfName);
onMounted(() => {
  getRechargePaymentChannelList();
  getRechargeConfigList();
  if (cpf.value !== "" && userCpfName.value !== "") {
    isInfoRecharge.value = 1;
  }
  //进入充值页面
  FiltrationFun.setReportEvent("AddToCart");
});
//获取充值金额列表
const getRechargeConfigList = () => {
  WalletAxios.getRechargeConfigList().then(res => {
    res.rechargeAmounts.sort((a, b) => a - b);
    res.rechargeAmounts.filter(item => {
      const val = item / 100;
      paylist.rechargeAmounts.push(val);
    });
  });
};
//选择前
const getSelect = res => {
  inputVal.value = inputVal.value === res ? 0 : parseInt(res);
};
// 获取充值渠道
const channelList = ref<PaymentChannelListRes[]>([]);
const getRechargePaymentChannelList = () => {
  WalletAxios.getRechargePaymentChannelList().then(res => {
    channelList.value = res.list;
    getMagnification.value = channelList.value[0];
  });
};
//设置充值渠道
const getMagnification = ref({
  id: 0,
  paymentChannelName: "",
  paymentChannelType: 0,
  sort: 0,
});
const setMagnification = item => {
  getMagnification.value = item;
};
const paymentImg = ref("");
//充值
const clickTopup = sortBy.throttle(() => {
  if (cpf.value !== "" && userCpfName.value !== "") {
    if (inputVal.value < 10) {
      return;
    }
    PubSub.publish(PubSubEnum.SHOW_LOADING);
    const data = {
      paymentChannelType: getMagnification.value.paymentChannelType,
      currencyAmount: ensureTwoDecimalPlaces(inputVal.value),
    };
    WalletAxios.createRechargePaymentOrder(data)
      .then(_res => {
        PubSub.publish(PubSubEnum.HIDE_LOADING);
        if (_res.payUrl !== "" && _res.code !== 2006) {
          isInfoRecharge.value = 1;
          paymentImg.value = _res.payUrl;
          popupShow.value = true;
          //充值拉单成功
          FiltrationFun.setReportEvent("InitiateCheckout");
        } else {
          PubSub.publish(PubSubEnum.SHOW_ERROR_TIP, { text: "充值受限" });
        }
      })
      .finally(() => {
        PubSub.publish(PubSubEnum.HIDE_LOADING);
      });
  } else {
    popupShow.value = true;
  }
}, 1000);
function ensureTwoDecimalPlaces(num) {
  // 将数字转换为字符串
  let numStr = num.toString();

  // 检查是否有小数点
  if (numStr.includes(".")) {
    // 获取小数部分的长度
    const decimalPart = numStr.split(".")[1];
    const decimalLength = decimalPart.length;

    // 如果小数部分长度小于2，则补足两位
    if (decimalLength < 2) {
      return parseFloat(numStr + "0".repeat(2 - decimalLength)).toFixed(2);
    } else {
      // 如果已经有两位或更多小数位，直接返回
      return numStr;
    }
  } else {
    // 如果没有小数部分，直接补足两位
    return parseFloat(numStr + ".00").toFixed(2);
  }
}
/*****************填写信息*********************** */
//cpfID
const openingBank = ref("");
const cpfBlur = ref(false);
//这边是id
const cpfIdBlurFun = () => {
  cpfBlur.value = false;
};
const cpfIdFocusFun = () => {
  cpfBlur.value = true;
};
//这边是name
const cpfName = ref("");
const cpfNameBlur = ref(false);
const cpfNameBlurFun = () => {
  cpfBlur.value = false;
};
const cpfNameFocusFun = () => {
  cpfNameBlur.value = true;
};
//保存填写充值账户
const rechargeUp = () => {
  if (openingBank.value.length === 11 && cpfName.value !== "") {
    console.log(
      openingBank.value,
      " openingBank.value提交保存填写充值账户cpfName.value",
      cpfName.value,
    );
    UserAxios.updateUserInfo({ cpf: openingBank.value, cpfName: cpfName.value }).then(_res => {
      PubSub.publish(PubSubEnum.SHOW_SUCCESS_TIP);
      cpf.value = openingBank.value;
      userCpfName.value = cpfName.value;
      popupShow.value = false;
      clickTopup();
      isInfoRecharge.value = 1;
    });
  }
};
/************选择倍率类型************* */
const bonusType = ref(1);
</script>
<template>
  <!-- 巴西充值页面 -->
  <div class="frame-div">
    <div class="interval-frame"></div>
    <div class="content-frame">
      <div class="payment-channel df ai-center">
        <div class="payment-frame">
          <div class="tiltie-frame">{{ t("userSet.paymentChannel") }}:</div>
          <div class="paymentlist-frame">
            <div style="width: 100%; height: auto" class="df">
              <div class="df">
                <div
                  v-for="(item, index) in channelList"
                  :key="index"
                  class="paymentlist-type"
                  :class="{ gradient: item.id === getMagnification.id }"
                  @click="setMagnification(item)"
                >
                  PIX-{{ index + 1 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="topup-bonus-select-top df">
        <img
          v-show="bonusType === 1"
          src="@/image/new_img/home/user_img/icon_checkbox_1.svg"
          @click="bonusType = 2"
        />
        <img
          v-show="bonusType === 2"
          src="@/image/new_img/home/user_img/icon_checkbox_2.svg"
          @click="bonusType = 1"
        />
        {{ t("userSet.actParticipate") }}
      </div>
      <div class="recharge-instructions-frame">
        <div class="recharge-instructions df ai-center">
          <img class="tips-jianbain" src="@/image/new_img/home/user_img/tips_jianbain.png" />
          {{ t("userSet.rechargeInstructions") }}
        </div>
      </div>
      <div class="input-frame df ai-center">
        <div class="title-frame">
          {{ t("currencyType.pt") }}
        </div>
        <div class="field-class">
          <input
            class="field-class-frame1"
            type="number"
            v-model.number="inputVal"
            :placeholder="t('inputPlaceholder.rechargePlaceholder')"
          />
        </div>
      </div>
      <div class="select-list-frame" v-if="paylist.rechargeAmounts.length !== 0">
        <div
          v-for="(item, index) in paylist.rechargeAmounts"
          :key="index"
          class="list-content"
          :class="{ 'select-frame': inputVal == item }"
          @click="getSelect(item)"
        >
          R$ {{ item }}
        </div>
      </div>
      <div class="bottom-frame">
        <img
          v-show="inputVal == 0 || inputVal < 10"
          src="@/image/new_img/home/user_img/btnv2_topup_disable.png"
        />
        <img
          v-show="inputVal != 0 && inputVal >= 10"
          src="@/image/new_img/home/user_img/btnv2_topup_enable.png"
          @click="clickTopup"
        />
      </div>
    </div>
    <!-- 弹起充值页面 -->
    <Popup
      v-model:show="popupShow"
      :position="'bottom'"
      z-index="10000"
      duration="0.5"
      style="height: 100%; background-color: #1b0a24"
      :overlay="false"
      :safe-area-inset-top="true"
      :safe-area-inset-bottom="true"
    >
      <div class="content-frame2" v-if="isInfoRecharge === 1">
        <div class="title-frame df jc-center ai-center">
          <img
            class="close-img"
            src="@/image/new_img/home/cs_close.png"
            @click="popupShow = false"
          />
          <div class="title-name df ai-center">{{ t("userSet.recharge") }}</div>
        </div>
        <div class="payment-frame">
          <iframe class="image-frame" :src="paymentImg"></iframe>
        </div>
      </div>
      <!-- 充值信息输入页面 -->
      <div class="content-frame2" v-if="isInfoRecharge === 0">
        <div class="daohng-content df ai-center jc-center">
          <div class="fanhui-frame df ai-center jc-center">
            <img src="@/image/new_img/huitui_bai.png" @click="popupShow = false" />
          </div>
          <div class="title-name df ai-center">{{ t("userSet.linkCPF") }}</div>
        </div>

        <div class="title-text-frame df ai-center">
          <div class="tips-text">
            {{ t("userSet.rechargeitle") }}
          </div>
        </div>
        <div class="">
          <div class="input-content-frame">
            <div class="input-title-content marginTop">{{ t("withdrawals.cpfId") }}</div>
            <div
              class="input-frame df ai-center jc-space-between"
              :class="{
                'field-val': openingBank.length !== 11 && openingBank.length > 0,
                'field-val-true': openingBank.length === 11 || cpfBlur,
              }"
            >
              <div class="Field-content df ai-center">
                <Field
                  v-model="openingBank"
                  class="field-frame"
                  type="number"
                  :center="true"
                  :placeholder="t('inputPlaceholder.rechargeCPF')"
                  color="#ffffff"
                  @blur="cpfIdBlurFun"
                  @focus="cpfIdFocusFun"
                />
              </div>
              <img class="left-img" src="@/image/new_img/home/user_img/yinhangka_bai.png" />
            </div>
            <div
              v-show="openingBank.length !== 11 && openingBank.length > 0"
              class="cpfVerificar-frame df ai-center"
            >
              <span>
                {{ t("inputError.cpfVerificar") }}
              </span>
            </div>
          </div>

          <div class="input-content-frame">
            <div class="input-title-content marginTop">{{ t("userSet.name") }}</div>
            <div
              class="input-frame df ai-center jc-space-between"
              :class="{
                'field-val-true': cpfNameBlur,
              }"
            >
              <div class="Field-content df ai-center">
                <Field
                  v-model="cpfName"
                  class="field-frame"
                  :center="true"
                  :placeholder="t('inputPlaceholder.rechargeName')"
                  color="#ffffff"
                  @blur="cpfNameBlurFun"
                  @focus="cpfNameFocusFun"
                />
              </div>
              <img class="left-img" src="@/image/new_img/activity/user_bai.png" />
            </div>
          </div>
        </div>
        <div
          class="df ai-center jc-center"
          :class="[cpfName !== '' && openingBank.length == 11 ? 'bottom-top2' : 'bottom-top1']"
          @click="rechargeUp"
        >
          {{ t("userSet.enviar") }}
        </div>
      </div>
    </Popup>
  </div>
</template>
<style lang="less" scoped>
.frame-div {
  width: 100%;
  height: 100%;
  background-image: url(@/image/new_img/main_bg_2.png);
  background-size: cover;
  background-repeat: repeat;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
}

.interval-frame {
  width: 100%;
  height: 1px;
}

.content-frame {
  width: calc(100% - 60px);
  height: auto;
  margin-left: 30px;

  .payment-channel {
    width: 100%;
    height: 170.5px;
    margin-top: 38px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #ffffff0a;
    .payment-frame {
      width: calc(100% - 35px);
      margin-left: 35px;
    }

    .tiltie-frame {
      color: rgba(255, 255, 255, 0.85);
      font-size: 28px;
    }

    .paymentlist-frame {
      width: 100%;
      height: auto;
      overflow-x: scroll;
      margin-top: 10px;
    }

    .paymentlist-frame::-webkit-scrollbar {
      display: none;
    }

    .paymentlist-type {
      width: 166px;
      height: 66px;
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.65);
      border-radius: 16px;
      margin-right: 17px;
      text-align: center;
      line-height: 66px;
      font-size: 26px;
    }

    .gradient {
      background-image: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%);
    }
  }

  .recharge-instructions-frame {
    width: 100%;
    height: auto;
    background-color: rgb(27, 10, 36);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    .recharge-instructions {
      width: 100%;
      height: 66px;
      background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border-radius: 10px;
      justify-content: flex-start;
      color: rgba(255, 255, 255, 0.5);
      font-size: 23px;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
  }

  .tips-jianbain {
    width: 28px;
    height: 28px;
    margin-left: 20px;
    margin-right: 10px;
  }

  .input-frame {
    width: 100%;
    height: 102px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    margin-top: 10px;

    .title-frame {
      color: #ab3fe7;
      font-size: 27px;
      margin-left: 22px;
      font-weight: 700;
    }
  }

  .input-frame {
    width: 100%;
    height: 85px;
  }
}

.field-class {
  font-size: 27px;
  color: #ffffff !important;
  margin-left: 20px;
}
:deep(.field-class) {
  .van-field__body {
    margin-top: 6px;
  }
  .van-field__control {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.85);
    font-size: 28px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    padding-bottom: 6px;
  }
  .van-field__control::-webkit-input-placeholder {
    font-family: monospace;
    color: #757575;
    font-size: 38px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    padding-bottom: 6px;
  }
}

// /deep/ .van-field__control {
//   font-family: monospace;
//   color: rgba(255, 255, 255, 0.85);
//   font-size: 32px;
//   font-weight: 400;
// }

// /deep/ .van-field__control::-webkit-input-placeholder {
//   color: #757575;
//   font-size: 32px;
//   font-weight: 400;
// }

.select-list-frame {
  padding: 0;
  width: 100%;
  height: 100%;
  /*设置布局方式为flex布局*/
  display: flex;
  /*换行*/
  flex-wrap: wrap;
  margin-top: 30px;
}

.list-content {
  width: 214.5px;
  height: 76px;
  margin-right: 12px;
  list-style: none;
  text-align: center;
  line-height: 76px;
  background-color: #ffffff26;
  color: white;
  font-weight: bolder;
  border-radius: 30px;
  margin-bottom: 10px;
  font-size: 24px;
}

.list-content:nth-child(3n + 0) {
  margin: 0;
}

.select-frame {
  background-color: #ab3fe7;
}

.bottom-frame {
  width: auto;
  margin: auto;
  margin-top: 61px;
  text-align: center;

  img {
    width: 250px;
    height: 100px;
  }
}

// 弹起充值的弹窗
.content-frame2 {
  width: 100%;
  height: calc(100% - 106px);
  /*半透明背景色 */
  backdrop-filter: blur(20px);
  /*背景模糊效果 */
  -webkit-backdrop-filter: blur(20px);

  .title-frame {
    width: 100%;
    height: 105px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    left: 0;
    right: 0;

    .title-name {
      font-size: 30px;
      color: #ffffff;
    }
  }

  .close-img {
    width: 55px;
    height: 55px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    top: 30px;
  }

  .payment-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .image-frame {
    width: 100%;
    height: 100%;
  }
}

:deep(.content-frame) {
  .van-popup::-webkit-scrollbar {
    display: none;
  }
}
.field-class-frame1 {
  width: 100%;
  height: 50px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  font-size: 28px;
  line-height: 78px;
}
.field-class-frame1::-webkit-inner-spin-button,
.field-class-frame1::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-class-frame1:-moz-placeholder {
  color: #524f62;
  font-size: 28px;
}
.field-class-frame1::-moz-placeholder {
  color: #524f62;
}
.daohng-content {
  width: 100%;
  height: 106px;
  position: relative;
  left: 0;
  top: 0;
  .fanhui-frame {
    width: 76px;
    height: 76px;
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #ffffff14;
    img {
      width: 42px;
      height: 42px;
    }
  }
  .title-name {
    font-size: 32px;
    color: #ffffffd9;
  }
}
.title-text-frame {
  width: 652px;
  max-height: 218px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 34px;
  color: #ffffffa6;
  font-size: 24px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #ffffff0a;
  margin-top: 40px;
  .tips-text {
    width: 592px;
    height: auto;
    margin: auto;
    line-height: 36px;
  }
}

.input-content-frame {
  width: calc(100% - 60px);
  margin: auto;
  overflow: hidden;

  .input-frame {
    width: 99%;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 28px;
    margin-top: 10px;
  }

  .input-title-content {
    font-weight: 400;
    font-size: 28px;
    color: #ffffff73;
    margin-top: 34px;
    margin-left: 30px;
  }
  .marginTop {
    margin-top: 44px;
  }
  .field-frame {
    width: 100%;
    height: 80px;
    font-size: 28px;
  }

  .cpfVerificar-frame {
    width: 100%;
    height: 76px;
    font-size: 28px;
    color: #ffffff;
    background-color: #ff000040;
    border-radius: 16px;
    span {
      margin-left: 30px;
    }
  }

  .field-val-true {
    border-color: #ab3fe7;
  }
  .field-val {
    border-color: #eb5757;
  }
}
.left-img {
  width: 46px;
  height: 46px;
  margin-right: 30px;
}
.Field-content {
  width: 82%;
  height: 102px;
  margin-left: 20px;
}
:deep(.van-field__control) {
  font-size: 28px;
}
.bottom-top1 {
  width: 257px;
  height: 100px;
  font-size: 32px;
  margin-top: 76px;
  border-radius: 34px;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.44rem !important;
  color: #ffffff40;
  margin: auto;
  margin-top: 76px;
}
.bottom-top2 {
  width: 257px;
  height: 100px;
  font-size: 32px;
  margin-top: 76px;
  border-radius: 34px;
  background: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.44rem !important;
  color: #ffffff !important;
  margin: auto;
  margin-top: 76px;
}

.topup-bonus-select-top {
  width: 100%;
  height: auto;
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 28px;
  color: #ffffffd9;
  padding: 24px;
  padding-left: 0;
  img {
    width: 30px;
    height: 30px;
    margin-right: 16px;
    margin-left: 8px;
  }
}
</style>
